<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		h1{
			text-align: center;
		}
		.box{
			width: 720px;
			margin: 0 auto;
			margin-top: 20px;
			img{
				width: 100%;
			}
		}
		.skye{
			width: 720px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			margin-top: 20px;
			p{
				margin-right: 10px;
			}
			li{
				width: 64px;
				list-style: none;
				position: relative;
				margin: 0 10px;
			}
		}
		.show{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 300px;
			background: #191e25;
			color: gray;
			padding: 20px;
			bottom: 80px;
			border: 1px solid gold;
			display: none;
			h4{
				color: gold;
				border-bottom: 2px solid gold;
				text-align: center;
				padding: 10px 0;
			}
			p{
				padding-top: 10px;
				font-size: 14px;
			}
		}
		.sj{
			width: 30px;
			height: 30px;
			background: #191e25;
			border: 1px solid gold;
			position: absolute;
			left: 50%;
			transform: translateX(-50%) rotate(45deg);
			border-top-color: transparent;
			border-left-color: transparent;
			bottom: -15px;
		}
		.skye li:hover .show{
			display: block;
		}
		.skye ul{
			display: flex;
		}
	</style>
</head>
<body>
	<h1></h1>
	<div class="box">
		<img src="">
	</div>
	<div class="skye">
		<p>技能描述：</p>
		<ul>
			<!-- <li>
				<img src="">
				<div class="show">
					<h4></h4>
					<p></p>
					<div class="sj"></div>
				</div>
			</li> -->
		</ul>
	</div>
	<script type="text/javascript" src="./ajax.js"></script>
	<script type="text/javascript">
		//url传来的参数
		console.log(location.search.split("=")[1])
		let id = location.search.split("=")[1]
		let h1 = document.querySelector('h1')
		let img = document.querySelector('.box img')
		let ul = document.querySelector('ul')
		ajax({
			method: "get",
			url: `https://game.gtimg.cn/images/lol/act/img/js/hero/${id}.js?ts=2734602`,
			success: function(res) {
				console.log(res)
				h1.innerText = `${res.hero.name}————${res.hero.title}简介：`
				img.src = res.skins[0].mainImg
				console.log( res.skins[0].mainImg)
				for(let i = 0; i < res.spells.length; i++){
					ul.innerHTML += `<li>
										<img src="${res.spells[i].abilityIconPath}">
										<div class="show">
											<h4>${res.spells[i].name}</h4>
											<p>${res.spells[i].description}</p>
											<div class="sj"></div>
										</div>
									 </li>`
				}
			}
		})
	</script>
</body>
</html>